<template>
  <zeda-dialog
    v-model="visible"
    :title="(id <= 0 ? '新建' : '编辑') + ''"
    width="1000px"
    :before-close="handleClose"
  >
    <aps-form
      :config="apsForm.formConfig"
      :model="apsForm.formData"
      :formRef="apsForm.formRef"
      :labelWidth="apsForm.labelWidth"
      ref="form"
    ></aps-form>

    <form-button
      slot="footer"
      :loading="loading"
      @cancel="handleClose"
      @submit="submit"
    >
    </form-button>
  </zeda-dialog>
</template>

<script>
import { add, detail, edit } from "@/api/basicdata/monthlyFlowing";
import { getParkList, getBuildingList } from "@/api/basicdata/construction";
import { getFacilitiesList, getRoomList } from "@/api/system/dept.js";
import CascaderSelect from "@/components/Select/CascaderSelect";
import FormButton from "@/components/FormButton";
import { replaceDigit, dealElectricity, replaceInteger } from "@/utils/index";

export default {
  dicts: [
    "energy_subarea_type",
    "subentry_type",
    "site_functions",
    "energy_type",
  ],
  components: { FormButton, CascaderSelect },
  props: {
    id: { type: [Number, String], default: "" },
    visible: { type: Boolean, default: false },
  },
  data() {
    return {
      parkOptions: [],
      buildingOptions: [],
      facilitiesArr: [], // 楼层集合
      roomArr: [], // 房间集合
      areaProps: {
        value: "areaId",
        children: "children",
        label: "name",
        checkStrictly: false,
        expandTrigger: "hover",
      },
      loading: false,
      apsForm: {
        formRef: "form",
        formData: {
          sort: 99, // 设置默认值
          status: true,
          custom: false, // 保持和registerForm一致
        },
        formConfig: {
          formAttr: {
            // inline: true,
            "label-position": "right",
            size: "small",
            bsColumn: {
              col: 2,
              middle: true,
            },
            rules: {
              //   name: [
              //     {
              //       required: true,
              //       message: "请输入建筑设施名称",
              //       trigger: "blur",
              //     },
              //   ],
              //   direction: [
              //     {
              //       required: true,
              //       message: "请输入朝向",
              //       trigger: "blur",
              //     },
              //   ],
              //   floor: [
              //     {
              //       required: true,
              //       message: "请输入楼层",
              //       trigger: "blur",
              //     },
              //   ],
              //   latitude: [
              //     {
              //       required: true,
              //       message: "请输入或选择建筑设施经度",
              //       trigger: ["blur", "change"],
              //     },
              //   ],
              //   longitude: [
              //     {
              //       required: true,
              //       message: "请输入或选择建筑设施纬度",
              //       trigger: ["blur", "change"],
              //     },
              //   ],
              //   buildingType: [
              //     {
              //       required: true,
              //       message: "请选择建筑类型",
              //       trigger: ["blur", "change"],
              //     },
              //   ],
              //   houseStructure: [
              //     {
              //       required: true,
              //       message: "请选择房屋结构",
              //       trigger: ["blur", "change"],
              //     },
              //   ],
              //   park: [
              //     {
              //       required: true,
              //       message: "请选择园区",
              //       trigger: ["blur", "change"],
              //     },
              //   ],
              //   building: [
              //     {
              //       required: true,
              //       message: "请选择楼幢",
              //       trigger: ["blur", "change"],
              //     },
              //   ],
              //   address: [
              //     {
              //       required: true,
              //       message: "请输入建筑设施地址",
              //       trigger: "blur",
              //     },
              //   ],
              //   landArea: [
              //     { required: true, message: "请输入用地面积", trigger: "blur" },
              //   ],
              //   buildArea: [
              //     { required: true, message: "请输入建筑面积", trigger: "blur" },
              //   ],
              //   completionTime: [
              //     {
              //       required: true,
              //       message: "请选择竣工日期",
              //       trigger: ["blur", "change"],
              //     },
              //   ],
            },
          },
          properties: {
            //这里是渲染查询表单的表头和类型的数据
            transcriptionTime: {
              label: "时间",
              typeName: "el-date-picker",
              type: "date",
              size: "small",
              "value-format": "yyyy-MM-dd",
              placeholder: "请选择",
            },
            energySubareaType: {
              label: "用能分区",
              typeName: "el-select",
              render: (h) => {
                let that = this;
                let arr = [];
                that.dict?.type?.energy_subarea_type.some((item) => {
                  arr.push(item);
                });
                // 数据严谨处理,处理后端数据异常情况
                let valNum =
                  that.$refs?.form?.getFieldsValue().energySubareaType;
                let a = [
                  h(
                    "el-select",
                    {
                      attrs: {
                        placeholder: "用能分区",
                        value: valNum,
                      },
                      props: ["value"],
                      on: {
                        change: (value) => {
                          that.$refs?.form?.setFieldValue(
                            "energySubareaType",
                            value
                          );
                        },
                      },
                    },
                    [
                      arr.map((item) => {
                        let { label, value } = item;
                        return h("el-option", {
                          props: {
                            label,
                            value: Number(value),
                            key: value,
                          },
                        });
                      }),
                    ]
                  ),
                ];
                return h("div", a);
              },
            },
            areaId: {
              label: "地址",
              typeName: "el-select",
              render: (h) => {
                let that = this;
                return (
                  <div>
                    <CascaderSelect
                      values={that.$refs?.form?.getFieldsValue().areaId}
                      value={that.$refs?.form?.getFieldsValue().areaId}
                      varient={"areaTree"}
                      showAllLevels={true}
                      propOptions={that.areaProps}
                      size={"small"}
                      placeholder={"请选择省市区"}
                      onInput={(value) => this.setVal(value, "areaId")}
                    ></CascaderSelect>
                  </div>
                );
              },
            },
            energyType: {
              label: "能耗类型",
              typeName: "el-select",
              render: (h) => {
                let that = this;
                let arr = [];
                that.dict?.type?.energy_type.some((item) => {
                  arr.push(item);
                });
                // 数据严谨处理,处理后端数据异常情况
                let valNum = that.$refs?.form?.getFieldsValue().energyType;
                let a = [
                  h(
                    "el-select",
                    {
                      attrs: {
                        placeholder: "用能分区",
                        value: valNum,
                      },
                      props: ["value"],
                      on: {
                        change: (value) => {
                          that.$refs?.form?.setFieldValue("energyType", value);
                        },
                      },
                    },
                    [
                      arr.map((item) => {
                        let { label, value } = item;
                        return h("el-option", {
                          props: {
                            label,
                            value: Number(value),
                            key: value,
                          },
                        });
                      }),
                    ]
                  ),
                ];
                return h("div", a);
              },
            },
            park: {
              typeName: "el-input",
              label: "园区",
            },
            // park: {
            //   typeName: "el-select",
            //   label: "园区",
            //   render: (h) => {
            //     let that = this;
            //     // 数据严谨处理,处理后端数据异常情况
            //     let valNum = that.$refs?.form?.getFieldsValue().park;
            //     let a = [
            //       h(
            //         "el-select",
            //         {
            //           attrs: {
            //             placeholder: "请选择",
            //             value: valNum,
            //           },
            //           props: ["value"],
            //           on: {
            //             change: (value) => {
            //               that.$refs?.form?.setFieldValue("park", value);
            //               that.$refs?.form?.setFieldValue("building", "");
            //               that.$refs?.form?.setFieldValue("floor", "");
            //               that.$refs?.form?.setFieldValue("room", "");
            //               that.getBuilding(value);
            //             },
            //           },
            //         },
            //         [
            //           that.parkOptions.map((item) => {
            //             let { id, name } = item;
            //             return h("el-option", {
            //               props: {
            //                 label: name,
            //                 value: id + "",
            //                 key: id,
            //               },
            //             });
            //           }),
            //         ]
            //       ),
            //     ];
            //     return h("div", a);
            //   },
            // },
            subentryType: {
              label: "分项类型",
              typeName: "el-select",
              render: (h) => {
                let that = this;
                let arr = [];
                that.dict?.type?.subentry_type.some((item) => {
                  arr.push(item);
                });
                // 数据严谨处理,处理后端数据异常情况
                let valNum = that.$refs?.form?.getFieldsValue().subentryType;
                let a = [
                  h(
                    "el-select",
                    {
                      attrs: {
                        placeholder: "用能分区",
                        value: valNum,
                      },
                      props: ["value"],
                      on: {
                        change: (value) => {
                          that.$refs?.form?.setFieldValue(
                            "subentryType",
                            value
                          );
                        },
                      },
                    },
                    [
                      arr.map((item) => {
                        let { label, value } = item;
                        return h("el-option", {
                          props: {
                            label,
                            value: Number(value),
                            key: value,
                          },
                        });
                      }),
                    ]
                  ),
                ];
                return h("div", a);
              },
            },
            building: {
              typeName: "el-input",
              label: "楼幢",
            },
            // building: {
            //   typeName: "el-select",
            //   label: "楼幢",
            //   render: (h) => {
            //     let that = this;
            //     // 数据严谨处理,处理后端数据异常情况
            //     let valNum = that.$refs?.form?.getFieldsValue().building;
            //     let a = [
            //       h(
            //         "el-select",
            //         {
            //           attrs: {
            //             placeholder: "请选择",
            //             value: valNum,
            //             disabled: !that.$refs?.form?.getFieldsValue().park,
            //           },
            //           props: ["value"],
            //           on: {
            //             change: (value) => {
            //               that.$refs?.form?.setFieldValue("building", value);
            //               that.$refs?.form?.setFieldValue("floor", "");
            //               that.$refs?.form?.setFieldValue("room", "");
            //               that.handleFacilitiesList(value);
            //             },
            //           },
            //         },
            //         [
            //           that.buildingOptions.map((item) => {
            //             let { id, name } = item;
            //             return h("el-option", {
            //               props: {
            //                 label: name,
            //                 value: id,
            //                 key: id,
            //               },
            //             });
            //           }),
            //         ]
            //       ),
            //     ];
            //     return h("div", a);
            //   },
            // },
            siteFunctions: {
              label: "场所职能",
              typeName: "el-select",
              render: (h) => {
                let that = this;
                let arr = [];
                that.dict?.type?.site_functions.some((item) => {
                  arr.push(item);
                });
                // 数据严谨处理,处理后端数据异常情况
                let valNum = that.$refs?.form?.getFieldsValue().siteFunctions;
                let a = [
                  h(
                    "el-select",
                    {
                      attrs: {
                        placeholder: "用能分区",
                        value: valNum,
                      },
                      props: ["value"],
                      on: {
                        change: (value) => {
                          that.$refs?.form?.setFieldValue(
                            "siteFunctions",
                            value
                          );
                        },
                      },
                    },
                    [
                      arr.map((item) => {
                        let { label, value } = item;
                        return h("el-option", {
                          props: {
                            label,
                            value: Number(value),
                            key: value,
                          },
                        });
                      }),
                    ]
                  ),
                ];
                return h("div", a);
              },
            },
            floor: {
              typeName: "el-input",
              label: "楼层",
            },
            // floor: {
            //   typeName: "el-select",
            //   label: "楼层",
            //   render: (h) => {
            //     let that = this;
            //     // 数据严谨处理,处理后端数据异常情况
            //     let valNum = that.$refs?.form?.getFieldsValue().floor;
            //     let a = [
            //       h(
            //         "el-select",
            //         {
            //           attrs: {
            //             placeholder: "请选择",
            //             value: valNum,
            //             disabled:
            //               !that.$refs?.form?.getFieldsValue().building,
            //           },
            //           props: ["value"],
            //           on: {
            //             change: (value) => {
            //               that.$refs?.form?.setFieldValue("floor", value);
            //               that.$refs?.form?.setFieldValue("room", "");
            //               that.handleRoomList(value);
            //             },
            //           },
            //         },
            //         [
            //           that.facilitiesArr.map((item) => {
            //             let { id, name } = item;
            //             return h("el-option", {
            //               props: {
            //                 label: name,
            //                 value: id,
            //                 key: id,
            //               },
            //             });
            //           }),
            //         ]
            //       ),
            //     ];
            //     return h("div", a);
            //   },
            // },
            dataSource: {
              typeName: "el-input",
              label: "数据来源",
            },
            room: {
              typeName: "el-input",
              label: "房间号",
            },
            // room: {
            //   typeName: "el-select",
            //   label: "房间号",
            //   render: (h) => {
            //     let that = this;
            //     // 数据严谨处理,处理后端数据异常情况
            //     let valNum = that.$refs?.form?.getFieldsValue().room;
            //     let a = [
            //       h(
            //         "el-select",
            //         {
            //           attrs: {
            //             placeholder: "请选择",
            //             value: valNum,
            //             disabled: !that.$refs?.form?.getFieldsValue().floor,
            //           },
            //           props: ["value"],
            //           on: {
            //             change: (value) => {
            //               that.$refs?.form?.setFieldValue("room", value);
            //             },
            //           },
            //         },
            //         [
            //           that.roomArr.map((item) => {
            //             let { id, name } = item;
            //             return h("el-option", {
            //               props: {
            //                 label: name,
            //                 value: id,
            //                 key: id,
            //               },
            //             });
            //           }),
            //         ]
            //       ),
            //     ];
            //     return h("div", a);
            //   },
            // },
            lastValue: {
              typeName: "el-input",
              label: "上期抄表数",
            },
            department: {
              typeName: "el-input",
              label: "部门",
            },
            // department: {
            //   label: "部门",
            //   typeName: "el-select",
            //   render: (h) => {
            //     let that = this;
            //     return (
            //       <div>
            //         <CascaderSelect
            //           values={that.$refs?.form?.getFieldsValue().department}
            //           varient={"energy"}
            //           size={"small"}
            //           placeholder={"请选择"}
            //           onInput={(value) => this.setVal(value, "department")}
            //         ></CascaderSelect>
            //       </div>
            //     );
            //   },
            // },
            totalValue: {
              typeName: "el-input",
              label: "本期抄表数",
            },
            office: {
              typeName: "el-input",
              label: "科室",
            },
            totalEnergyValue: {
              typeName: "el-input",
              label: "本期能耗量",
            },
            enterprise: {
              typeName: "el-input",
              label: "编制单位",
            },
            fillInDate: {
              label: "编制日期",
              typeName: "el-date-picker",
              type: "date",
              size: "small",
              "value-format": "yyyy-MM-dd",
              placeholder: "请选择",
            },
          },
        },
      },
    };
  },
  watch: {
    visible(value) {
      if (value) {
        // this.getPark();
        if (String(this.id).length > 0) {
          this.getInfo();
        }
      }
    },
  },
  methods: {
    getInfo() {
      detail(this.id)
        .then((res) => {
          if (res.code === 700) {
            this.$message.warning(res.msg);
            return false;
          }
          let newData = res?.data || {};
          newData.areaId = res?.data?.douDistrictId;
          this.$refs?.form?.setFieldsValue(newData);
        })
        .catch(() => {
          // this.$message.error("系统错误,请联系管理员!302005");
        });
    },
    // getPark() {
    //   getParkList()
    //     .then((res) => {
    //       if (res.code === 700) {
    //         this.$message.warning(res.msg);
    //         return false;
    //       }
    //       this.parkOptions = res.data;
    //     })
    //     .catch((err) => {
    //       // this.$message.error("系统错误,请联系管理员!300406");
    //     });
    // },
    // getBuilding(val) {
    //   if (!val) return false;
    //   getBuildingList({ parkId: val })
    //     .then((res) => {
    //       if (res.code === 700) {
    //         this.$message.warning(res.msg);
    //         return false;
    //       }
    //       this.buildingOptions = res.data;
    //     })
    //     .catch((err) => {
    //       // this.$message.error("系统错误,请联系管理员!300407");
    //     });
    // },
    // // 获取楼层集合
    // handleFacilitiesList(val) {
    //   if (!val) return false;
    //   getFacilitiesList(val)
    //     .then((res) => {
    //       if (res.code === 700) {
    //         this.$message.warning(res.msg);
    //         return false;
    //       }
    //       this.facilitiesArr = res.rows;
    //     })
    //     .catch((err) => {
    //       // this.$message.error("系统错误,请联系管理员!300407");
    //     });
    // },
    // // 获取房间号集合
    // handleRoomList(val) {
    //   if (!val) return false;
    //   getRoomList(val)
    //     .then((res) => {
    //       if (res.code === 700) {
    //         this.$message.warning(res.msg);
    //         return false;
    //       }
    //       this.roomArr = res.data;
    //     })
    //     .catch((err) => {
    //       // this.$message.error("系统错误,请联系管理员!300407");
    //     });
    // },
    setVal(value, key) {
      if (key === "areaId") {
        if (value && value.length > 0) {
          this.$refs?.form?.setFieldValue("douProvincialId", value[0]);
          this.$refs?.form?.setFieldValue("douCityId", value[1]);
          this.$refs?.form?.setFieldValue("douDistrictId", value[2]);
        } else {
          this.$refs?.form?.setFieldValue("douProvincialId", null);
          this.$refs?.form?.setFieldValue("douCityId", null);
          this.$refs?.form?.setFieldValue("douDistrictId", null);
        }
      } else if (key === "department") {
        if (value && value.length > 0) {
          this.$refs?.form?.setFieldValue(key, value[value.length - 1]);
        } else {
          this.$refs?.form?.setFieldValue(key, null);
        }
      } else {
        if (value && value.length > 0) {
          this.$refs?.form?.setFieldValue(key, value);
        }
      }
    },

    submit() {
      const data = {
        ...this.$refs.form.getFieldsValue(),
      };
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.loading = true;
          if (this.id) {
            edit(data)
              .then((res) => {
                this.loading = false;
                if (res.code === 700) {
                  this.$message.warning(res.msg);
                  return false;
                }
                this.$message.success("操作成功");
                this.handleClose(true);
              })
              .catch(() => {
                this.loading = false;
                // this.$message.error("系统错误,请联系管理员!302004");
              });
          } else {
            add(data)
              .then((res) => {
                this.loading = false;
                if (res.code === 700) {
                  this.$message.warning(res.msg);
                  return false;
                }
                this.$message.success("操作成功");
                this.handleClose(true);
              })
              .catch(() => {
                this.loading = false;
                // this.$message.error("系统错误,请联系管理员!302003");
              });
          }
        } else {
          return false;
        }
      });
    },
    handleClose(status) {
      this.$refs["form"].resetFields();
      this.$emit("update:visible", false);
      this.$emit("close", status === true ? status : false);
    },
  },
};
</script>

<style scoped lang="scss">
::v-deep .el-form {
  .el-input,
  .el-cascader,
  .el-input-number,
  .el-select {
    width: 100% !important;
  }
  .map {
    display: flex;
    .el-input {
      margin-right: 10px;
    }
  }
}
</style>
